<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘按下事件</title>
		<style type="text/css">
			div{
				width:50px;
				height: 50px;
				background: red;
				/*margin: 50px auto 50px auto;*/
			}
		</style>
	</head>
	<body>
		<div></div>
		<script src="../jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			/*给div元素添加键盘按下事件；
			  1、获取按下的是哪个键
			  2、获取元素在页面上的位置
			  3、根据按下的是哪个键来判断操作；
			     1)若按下的左边箭头：设置元素的偏移量：offset({top:top,left:left-1})
			              若按下向右边箭头：offset({top:top,left:left+1})*/
			  //获取元素
			  var ele=$('div')
			$(document).keydown(
				function(){
					var opt=event.which;
					var l=$('div').offset().left;
					var t=$('div').offset().top;
					switch(opt){
						case 37:
							ele.offset({top:t,left:l-1});
							break;
						case 38:
							ele.offset({top:t-1,left:l});
							break;
						case 39:
							ele.offset({top:t,left:l+1});
							break;
						case 40:
							ele.offset({top:t+1,left:l});
							break;
						default:
							break;
					}
					
				}
			);
		</script>
	</body>
</html>
